<template>
  <div id="applyVSReport">
    <Breadcrumb content="报告项目通道号转译对照" />
    <div class="bodyContent">
      <Splitpanes class="area">
        <!-- 左侧报告单元列表 -->
        <Pane :size="28">
          <vxe-toolbar perfect>
            <template #buttons>
              <div class="smallToolTitle">报告单元</div>
              <SelectWorkGroup :url="'/api/rptGroup/findRptGroupList'" :businessType="'10'" @getSelectedId="getSelectedId"></SelectWorkGroup>
              <vxe-input v-model="searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="findDictItem" @keyup="keyupItemDictEnter" @search-click="findDictItem()"></vxe-input>
            </template>
          </vxe-toolbar>
          <div class="rightTable">
            <vxe-table ref="itemDictTable" border show-header-overflow height="auto" show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }" @current-change="itemDictRowClick" :data="itemDictList" :loading="showLoading" class="mytable-scrollbar">
              <vxe-column type="seq" title="#" width="30"></vxe-column>
              <vxe-column field="itemNo" title="报告项目编号" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.itemNo" clearable placeholder="关键字查询"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="itemNa" title="报告项目名称" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <vxe-input v-model="row.itemNa" clearable placeholder="关键字查询"></vxe-input>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <!-- 中间对照信息 -->
        <Pane :size="60">
          <Splitpanes >
            <pane :size="30">
              <vxe-table ref="instrSetupTable" border show-header-overflow height="auto" show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }"  @current-change="instrSetuplick" :data="instrSetupList" :loading="showLoading" class="mytable-scrollbar">
                <vxe-column type="seq" title="#" width="30"></vxe-column>
                <vxe-column field="instrCode" title="仪器编号"></vxe-column>
                <vxe-column field="instrName" title="仪器名称"></vxe-column>
                <vxe-column field="channelCode" title="通道号"></vxe-column>
              </vxe-table>
            </Pane>
            <pane :size="40">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="deleteItemVsChannelList"></vxe-button>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-save" content="保存" @click="saveItemVsChannelList"></vxe-button>
                </template>
              </vxe-toolbar>
              <div class="leftTable">
                <vxe-table ref="itemVsChannelTableRef" border class="mytable-scrollbar" height="auto" show-header-overflow show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }" :data="feeitemVsItemdictList" :loading="dictVsChannelShow"  :edit-config="{ trigger: 'click', mode: 'cell' }" :column-config="{ resizable: true }">
                  <vxe-column type="checkbox" width="30"></vxe-column>
                  <vxe-column field="feeCode" title="收费项目编号"></vxe-column>
                  <vxe-column field="feeName" title="收费项目名称"></vxe-column>
                  <vxe-column field="tranChannelCode" title="转译后通道号" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #default="{ row }">
                      <div>{{ row.tranChannelCode }}</div>
                    </template>
                    <template #edit="{ row }">
                      <vxe-input v-model="row.tranChannelCode" type="text"></vxe-input>
                    </template>
                  </vxe-column>

                </vxe-table>
              </div>
            </Pane>
          </Splitpanes>
        </Pane>
        <!-- 右侧信息 -->
        <Pane :size="20">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-input v-model="searchForm.groupSearchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getFeeItemList" @keyup="keyupFeeItemEnter" @search-click="getFeeItemList()"></vxe-input>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" @click="getFeeItemList"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="leftTable">
            <vxe-table ref="labFeeItemTable" border class="mytable-scrollbar" height="auto" show-header-overflow show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }" @cell-dblclick="grouprowClick" :data="feeItemList">
              <vxe-column type="seq" title="#" width="30"></vxe-column>
              <vxe-column field="feeCode" title="收费项目编号"></vxe-column>
              <vxe-column field="feeName" title="收费项目名称"></vxe-column>
            </vxe-table>
          </div>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import { AppStore } from '@/stores/store';
import { isEmpty } from 'lodash';
import SelectWorkGroup from '@/views/lab_sys/lab_bus/components/SelectWorkGroup.vue'; //报告单元引入下拉组件
import { GetRptGroupOptions } from '@/utils/SysOptionsHelper';
import { IsEmpty } from '@/utils/common';

let store = AppStore();
// 全局变量定义区 ==========
// 变量定义区
let { proxy }: any = getCurrentInstance();
let conWidth = ref(document.documentElement.clientWidth);
const itemDictList = reactive([]);

let searchGroupForm = reactive({
  rptGroup: ''
});

let feeItemList = reactive([]);
let showLoading = ref(false); //刷新+表格加载
let dictVsChannelShow = ref(false); //刷新+表格加载
let searchValue = ref('');
const searchForm = reactive({
  orgId: store.userInfo.orgId,
  groupSearchValue: '',
  name: store.userInfo.orgName
});
let instrSetupList = reactive([]); //仪器列表
let addDialog = ref(false); //添加弹框展示状态
let loading = ref(false); //添加弹框展示状态
let itemRow: any = reactive({}); //报告项目选中行
let instrSetupRow: any = reactive({}); //仪器选中行

// 条数/页
const PageSizeList = [10, 50, 100, 200, 500];

const feeitemVsItemdictList: any = reactive([]);
let dictTreeTypeCodes: any = reactive(['reportCategory', 'YQDL', 'LABITEMKIND']);

// 方法定义区 =============
onMounted(() => {
});

// 下拉报告单元获取报告单元id
function getSelectedId(selectedRadioId, selectedName) {
  GetRptGroupOptions(selectedRadioId.value);
  searchGroupForm.rptGroup = selectedRadioId.value;
  findDictItem();
  getFeeItemList();

}

//通过报告单元获取仪器信息
function getInstrList() {
  instrSetupList.length = 0;
  feeitemVsItemdictList.length=0;
  if (IsEmpty(searchGroupForm.rptGroup)) {
    return;
  }
  const url = '/lis/instrSetup/findInstrSetupAndChannelList';
  proxy.$http
    .get(url, { params: { rptGroupId: searchGroupForm.rptGroup, itemNo: itemRow.itemNo } })
    .then((res: any) => {
      if (res.status.code === 1) {
        instrSetupList.push(...res.data);
        if (instrSetupList.length > 0){
          Object.assign(instrSetupRow, instrSetupList[0]);
          findDictitemVsChannelList();
          const $labInstrSetupTable = proxy.$refs.instrSetupTable;
          if ($labInstrSetupTable) {
            $labInstrSetupTable.setCurrentRow(instrSetupList[0]);
          }
        }
      }
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}



function formatCommon(arr, value) {
  for (const item of arr) {
    if (item.code == value) {
      return item.name;
    }
  }
}


// 回车查询
function keyupFeeItemEnter(e: any) {
  if (e.$event.code == 'Enter') {
    getFeeItemList();
  }
}

function keyupItemDictEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findDictItem();
  }
}

// 获取申请项目
function getFeeItemList() {
  feeItemList.length = 0;
  const url = '/lis/fee/item/findFeeItemList';
  let obj = {
    params: {
      keyWords: searchForm.groupSearchValue
    }
  };
  proxy.$http
      .get(url, obj)
      .then((res: any) => {
        feeItemList.push(...res.data);
        if (feeItemList.length > 0){
          const $labFeeItemTable = proxy.$refs.labFeeItemTable;
          if ($labFeeItemTable) {
            $labFeeItemTable.setCurrentRow(feeItemList[0]);
          }
        }
        showLoading.value = false;
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
        showLoading.value = false;
      });
}

// 获取报告项目列表
function findDictItem() {
  itemDictList.length = 0;
  showLoading.value = true;
  const url = '/lis/lab/item/findLabItemDictList';
  let obj = {
    params: {
      searchValue: searchValue.value,
      rptGroup: searchGroupForm.rptGroup,
      isTran: '1'
    }
  };
  proxy.$http
    .get(url, obj)
      .then((res: any) => {
        itemDictList.push(...res.data);
        if (itemDictList.length > 0){
          Object.assign(itemRow, itemDictList[0]);
          getInstrList();
          const $itemDictTable = proxy.$refs.itemDictTable;
          if ($itemDictTable) {
            $itemDictTable.setCurrentRow(itemDictList[0]);
          }
        }
        showLoading.value = false;
      })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showLoading.value = false;
    });
}
//报告项目列表点击事件
function itemDictRowClick({ row }: any) {
  Object.assign(itemRow, row);
  //去动态查询仪器列表
  getInstrList();
}
//仪器点击当前行
function instrSetuplick({ row }: any) {
  Object.assign(instrSetupRow, row);
 //查询通道号列表
  findDictitemVsChannelList();
}
// 获取报告项目通道号转译
function findDictitemVsChannelList() {
  feeitemVsItemdictList.length = 0;
  dictVsChannelShow.value=true;
  const url = '/lis/labDictitemVsChanne/findDictitemVsChannelList';
  let obj = {
    params: {
      rptGroup: searchGroupForm.rptGroup,
      itemNo: itemRow.itemNo,
      instrCode: instrSetupRow.instrCode,
      channelCode: instrSetupRow.channelCode
    }
  };
  proxy.$http
      .get(url, obj)
      .then((res: any) => {
        feeitemVsItemdictList.push(...res.data);
        dictVsChannelShow.value = false;
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
        dictVsChannelShow.value = false;
      });
}

// 双击新增中间数据
function grouprowClick({ row }: any) {
  if (IsEmpty(row)||IsEmpty(searchGroupForm.rptGroup)||IsEmpty(itemRow.itemNo)||IsEmpty(instrSetupRow.instrCode)||IsEmpty(instrSetupRow.channelCode)){
    return;
  }
  const url = '/lis/labDictitemVsChanne/addLabDictitemVsChannel';
  let addDictVsChannel = {
    rptGroup: searchGroupForm.rptGroup,
    itemNo: itemRow.itemNo,
    itemNa: itemRow.itemNa,
    instrCode: instrSetupRow.instrCode,
    instrName: instrSetupRow.instrName,
    channelCode: instrSetupRow.channelCode,
    feeCode: row.feeCode,
    feeName: row.feeName,
  };
  proxy.$http
      .post(url, addDictVsChannel)
      .then((res: any) => {
        if (res.status.code === 1){
          findDictitemVsChannelList();
        }
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
      });
}

// 双击中间列表删除数据
function deleteItemVsChannelList({ row }: any) {
  const ids = [];
  if (IsEmpty(row)){
    const arr = (proxy.$refs.itemVsChannelTableRef as any).getCheckboxRecords(true);
    if (!(arr && arr.length > 0)){
      VxeMessage('请选择删除数据', VxeNotifyType.error);
      return;
    }
    for (var i = 0; i < arr.length; i++) {
      ids.push(arr[i].id);
    }
  }else {
    ids.push(row.id);
  }
  const data = {
    itemVsChanneIds: ids
  };
  const url = '/lis/labDictitemVsChanne/deleteDictitemVsChannel';
  proxy.$http
    .post(url, data)
    .then((res: any) => {
      findDictitemVsChannelList();
      VxeMessage(res.status.msg, VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}
//保存通道号转译对照
function saveItemVsChannelList() {
  const $xTable = proxy.$refs.itemVsChannelTableRef as any;
  const itemVsChannelList = $xTable.getTableData().tableData;
  if (itemVsChannelList.length <= 0){
    VxeMessage('选择数据为空', VxeNotifyType.error);
  }
  const url = '/lis/labDictitemVsChanne/saveLabDictitemVsChannelList';
  proxy.$http
      .post(url, itemVsChannelList)
      .then((res: any) => {
        if (res.status.code === 1){
          findDictitemVsChannelList();
        }
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
      });
}


</script>
<style lang="scss" scoped>
#applyVSReport {
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    .area {
      background-color: $base-white;

      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }

      .leftTable {
        height: calc(100% - 40px);
      }

      .rightTable {
        height: calc(100% - 40px - 32px);
      }

      // 右侧基本信息表单
      .baseForm {
        .el-row {
          margin-left: 0 !important;
          margin-right: 0 !important;
        }

        .form-footer {
          :deep(.el-form-item__content) {
            margin-left: 120px !important;
          }
        }

        .el-form-item--large {
          margin-bottom: 10px;
        }

        .el-radio {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
